<template>
  <!-- div对象 -->

  <h1>我的第一个组件</h1>

  <div>变量<span class="variable">name</span>：{{ name }}</div>

  <div>变量<span class="variable">gender</span>：{{ gender }}</div>

  <div>变量<span class="variable">height</span>：{{ height }}</div>

  <div>变量<span class="variable">list[2]</span>：{{ list[2] }}</div>

  <div>变量<span class="variable">tuple[1]</span>：{{ tuple[1] }}</div>

  <div>变量<span class="variable">c</span>：{{ c }}</div>

  <div>变量<span class="variable">notSure</span>：{{ notSure }}</div>

  <div>变量<span class="variable">obj</span>：{{ obj }}</div>

  <div>属性<span class="attribute">welcome</span>：{{ welcome }}</div>

  <hr />
</template>

<!-- setup语法糖 -->

<script setup lang="ts">
var name = '张三'

const gender = false

let height = 1.8

let list: Array<number> = [1, 2, 3]

let tuple: [string, number] = ['hello', 10]

enum Color {
  Red,
  Green,
  Blue
}

let c: Color = Color.Green

let notSure: any = 4

notSure = 'maybe a string instead'

let obj: object = { name: '张三', age: 23 }

console.log('变量的值为： ', obj)

/* 定义组件属性 */

defineProps({
  welcome: String
})
</script>
<style scoped>
div {
  font-size: 24px;
}

.variable {
  color: #42b97e;
}

.attribute {
  color: #c90808;
}
</style>
